<script setup>
import {inject, onMounted, ref, shallowRef} from "vue";

const echarts = inject('echarts');

const jobRateChartRef = ref(null);
const pathRateChartRef = ref(null);
const jobRateChartOption = {
  xAxis: {
    data: ['2021', '2022', '2023', '2024']
  },
  yAxis: {},
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '历年就业率',
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        formatter: '{c}%'
      },
      emphasis: {},
      data: ['70', '60', '75', '70']
    }
  ]
};
const pathRateChartOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
    {
      name: '选择比例',
      type: 'pie',
      radius: ['40%', '70%'],
      label: {
        show: true,
        position: 'top',
      },

      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold',
        },
      },
      data: [
        {value: 54, name: '就业'},
        {value: 38, name: '升学'},
        {value: 38, name: '考公/考编'}
      ]
    }
  ]

};
const option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
const developPathList = shallowRef([
  {
    title: "升学",
    nameList: Array(5).fill("专业名称")
  }, {
    title: "考公/考编",
    nameList: Array(5).fill("岗位")
  }, {
    title: "就业",
    nameList: Array(5).fill("岗位")
  },
])
const adList = shallowRef(Array(6).fill({
  jobName: 'Java开发工程师',
  number: 4,
  address: '广州-天河',
  orientPerson: '2024届毕业生',
  companyName: '蔚来'
}))
onMounted(() => {
  console.log(jobRateChartRef.value)
  // 初始化就业率柱状图
  let jobRateChart = echarts.init(jobRateChartRef.value);
  jobRateChart.setOption(jobRateChartOption);
  // 初始化选择比例饼状图
  let pathRateChart = echarts.init(pathRateChartRef.value);
  pathRateChart.setOption(pathRateChartOption);
})
</script>

<template>
  <div class="job-info">
    <div class="banner"></div>
    <div class="inner-navbar">
      <div class="inner-navbar-db w">
        <div class="nav-item">
          <router-link to="/jobInfo">升学</router-link>
        </div>
        <div class="nav-item">
          <router-link to="/jobInfo">考公/考编</router-link>
        </div>
        <div class="nav-item">
          <router-link to="/jobInfo">就业岗位</router-link>
        </div>
        <div class="nav-item">
          <router-link to="/jobInfo">招聘信息</router-link>
        </div>
      </div>
      <div class="dec-shape-bar"></div>
    </div>
    <div class="rate-charts w">
      <el-row>
        <el-col :span="12">
          <div class="title-header">历年就业率</div>
          <div class="job-rate" ref="jobRateChartRef"></div>
        </el-col>
        <el-col :span="12">
          <div class="title-header">选择比例</div>
          <div class="path-rate" ref="pathRateChartRef"></div>
        </el-col>
      </el-row>
    </div>
    <div class="develop-path">
      <div class="develop-path-bd w">
        <div class="title-header">发展方向</div>
        <el-row :gutter="60">
          <el-col :span="8" v-for="(pathItem, index) in developPathList" :key="index">
            <div class="path-item">
              <div class="path-title">{{ pathItem.title }}<span class="go-more">更多&gt;&gt;</span></div>
              <ul class="name-list">
                <li v-for="name in pathItem.nameList"><span>{{ name }}</span></li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="ad-box w">
      <div class="title-header">招聘信息<span class="go-more">更多&gt;&gt;</span></div>
      <el-row :gutter="30" v-for="n in 2">
        <el-col :span="8" v-for="adItem in adList.slice(3*(n-1), 3+3*(n-1))">
          <div class="ad-item">
            <div class="ad-header">
              <h4 class="job-name">{{ adItem.jobName }}</h4>
              <span class="number">{{ adItem.number }}人</span>
            </div>
            <div class="ad-info">
              <p class="addr">
                <i class="addr-icon"></i>
                <span>{{ adItem.address }}</span>
              </p>
              <p class="orient-person">招聘对象：{{ adItem.orientPerson }}</p>
            </div>
            <div class="ad-footer">
              <p class="company-name">企业名称：{{ adItem.companyName }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
}

.w {
  width: 1400px;
  margin: 0 auto;
}

.banner {
  height: 350px;
  background-color: #7aafdb;
}

.inner-navbar {
  height: 60px;
  background: linear-gradient(to right, #1e9ab5, transparent);

  .nav-item {
    float: left;
    padding: 0 30px;
  }

  .nav-item a {
    display: block;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 18px;
    &:hover {
      color: #1e9ab5;
    }
  }
}

.title-header {
  padding-left: 18px;
  line-height: 20px;
  position: relative;
  margin-bottom: 30px;
  font-size: 20px;

  &::before {
    content: '';
    width: 0;
    height: 20px;
    border: 2px solid #1e9ab5;
    border-top: none;
    border-bottom: none;
    position: absolute;
    left: 0;
    top: 0;
  }

  .go-more {
    color: gray;
  }

}

.go-more {
  float: right;

  &:hover {
    cursor: pointer;
    color: #1e9ab5;
  }
}

.rate-charts {
  padding: 30px 0 0;

  div[class$="rate"] {
    height: 400px;
  }
}

.develop-path {
  padding: 20px 0 30px;
  background-color: #f5faff;

  .path-item {
    border: 1px solid black;
  }

  .path-title {
    padding: 0 45px;
    line-height: 45px;
    color: #fff;
    font-size: 18px;
    background-color: #61afff;

    .go-more {
      color: #fff;
      font-size: 14px;

      &:hover {
        color: #1e9ab5;
      }
    }
  }

  .name-list li {
    padding: 0 30px;
    color: #333;
    border-bottom: 1px solid lightgray;
    line-height: 50px;

    span {
      cursor: pointer;
    }
  }
}

.ad-box {
  padding: 20px 0 30px;

  .ad-item {
    padding: 20px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  }

  .ad-header {
    position: relative;

    h4.job-name {
      font-weight: 400;
      width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span.number {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .ad-info {
    margin: 10px 0;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    border-bottom: 1px solid lightgray;

    .addr {
      display: flex;
      align-items: center;
      //padding-left: 20px;
      i[class$="icon"] {
        width: 15px;
        height: 15px;
        background: url('@/assets/images/addr-icon.png') no-repeat center;
        background-size: cover;
        margin-right: 8px;
      }
    }
  }

  .ad-footer {
    font-size: 14px;
  }
}

</style>